<script setup lang="ts">
import { reactive, ref, type Ref } from 'vue'
import UpdateModal from './UpdateModal.vue'
import ChildView from './ChildView.vue'

interface ProductItem {
  id: number
  date: string
  name: string
  address: string
}

const tableData: ProductItem[] = reactive([
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const visible = ref(false)
const currentProduct = ref({})

const openUpdateModal = (row?: ProductItem) => {
  currentProduct.value = row || {}
  // console.log(row)
  visible.value = true
}

const visibleChange = () => {
  getData()
}

const getData = () => {}

const activeId: Ref<number> = ref(-1)

const changeItem = (id: number) => {
  activeId.value = id
}
</script>
<template>
  <el-row>
    <el-col :span="12">
      <el-input style="width: 240px" placeholder="Please input" />
    </el-col>
    <el-col :span="12" style="text-align: right">
      <el-button type="primary" @click="() => openUpdateModal()">新增</el-button>
    </el-col>
  </el-row>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column label="操作" min-width="120">
      <template #default="scope">
        <!-- <el-button link type="primary" size="small" @click="handleClick">
          详情
        </el-button> -->
        <el-button link type="primary" size="small" @click="openUpdateModal(scope.row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <ChildView
    v-for="value in tableData"
    :key="value.id"
    :row-item="value"
    @change-item="changeItem"
    :style="{ color: value.id === activeId ? 'red' : '' }"
  />

  <UpdateModal
    v-model:visible="visible"
    v-model:current-product="currentProduct"
    @visible-change="visibleChange"
  />
</template>
